<script setup>
import {onBeforeMount, reactive} from "vue";
import {postRequest} from "@/util/api";

const data = reactive({
  shareList: [],
  current: 1,
  pageSize: 10,
  total: 0,
});

onBeforeMount(() => {
  initData();
});

function initData() {
  postRequest("/share/getShareList", null, {
    current: data.current,
    pageSize: data.pageSize,
  }, (res) => {
    data.shareList = res.data.data.shareList;
    data.total = res.data.data.total;
  });
}
</script>

<template>
  <div style="padding: 20px">
    <el-table :cell-style="{ 'text-align': 'center' }" :data="data.shareList"
              :header-cell-style="{ 'text-align': 'center' }" border>
      <el-table-column prop="shareId" label="分享id" width="100"/>
      <el-table-column prop="fileId" label="分享文件id"/>
      <el-table-column prop="shareCode" label="分享码"/>
      <el-table-column prop="createTime" label="分享时间" width="200"/>
      <el-table-column prop="downloadTimes" label="下载次数"/>
      <el-table-column prop="invalidTime" label="失效时间"/>
      <el-table-column label="操作" width="240">
        <template #default="scope">
          <el-popconfirm title="确定查看文件详情吗?">
            <template #reference>
              <el-button size="small" type="danger">查看文件</el-button>
            </template>
          </el-popconfirm>
          <el-popconfirm title="确定生成分享链接吗?">
            <template #reference>
              <el-button size="small" type="danger">分享链接</el-button>
            </template>
          </el-popconfirm>
          <el-popconfirm title="确定取消分享吗?">
            <template #reference>
              <el-button size="small" type="danger">取消分享</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination v-model:current-page="data.current" v-model:page-size="data.pageSize" :page-sizes="[10, 20, 30, 40]"
                   :total="data.total" background class="pagination" layout="total, sizes, prev, pager, next"
                   @current-change="initData" @size-change="initData"/>
  </div>
</template>

<style lang="scss" scoped>
.pagination {
  float: right;
  margin-top: 20px;
}
</style>